<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../static/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="../../../static/expand/eleTree/eleTree/eleTree.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <!--<style>-->
        <!--body{margin: 10px;}-->
        <!--.demo-carousel{height: 200px; line-height: 200px; text-align: center;}-->
    <!--</style>-->
</head>
<body>



    <div >
        <table class="layui-table" id="demo" lay-filter="test"></table>
    </div>

    <div id="add_role_perm" style="padding: 20px; background-color: #F2F2F2; display:none">
        <!--分配权限-->
        <div class="layui-card-body">
            <div style="margin-bottom:20px ">

                <button id="edit_role_perm" type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe642;</i>
                </button>
            </div>

            <div  id="roleTree1">
                <div  class="eleTree roleTree" lay-filter="role_tree_data"></div>
            </div>

        </div>
    </div>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="assignment_perm">+权限</a>
</script>




<script type="text/html" id="toolTableTop">
    <div class="layui-btn-container">
        <button   type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="add">
            <i class="layui-icon">&#xe654;</i>
        </button>
        <button  type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="batchDeleted">
            <i class="layui-icon">&#xe640;</i>
        </button>
    </div>
</script>

<script src="../../static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript"  th:inline="none">
    layui.config({
        base: "../static/expand/eleTree/layui/lay/mymodules/"        //eleTree.js所在目录
    }).use([ 'layer', 'table', 'element','form','jquery','eleTree'], function(){
        var layer = layui.layer //弹层
            ,table = layui.table //表格
            ,eleTree = layui.eleTree //树结构
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,$ = layui.jquery
            ,form = layui.form;
        var nowIndex;
        var eTree;
        var data;


        //执行一个 table 实例
        var tableInfo = table.render({
            elem: '#demo', //选取html表格的id
            id: 'userId',
            response: {
                // statusName: 'status', //规定数据状态的字段名称，默认：code
                statusCode: '200 ' //规定成功的状态码，默认：0
                // ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
                // ,countName: 'total' //规定数据总数的字段名称，默认：count
                // ,dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            ,url: '/system/role'
            ,title: '用户表'
            ,toolbar: '#toolTableTop'
            ,page: true
            ,cols: [[
                 {type: 'checkbox', fixed: 'left'}
                // ,{field: 'roleId', title: 'ID', align:'center',sort: true, fixed: 'left'}
                ,{field: 'name', align:'center',title: '角色名'}
                ,{field: 'description', align:'center',title: '描述'}
                ,{fixed: 'right', title: '操作', align:'center', toolbar: '#barDemo'}
            ]]
        });
        //监听头工具条事件 toobar是头工具条
        table.on('toolbar(test)', function(obj){

            var checkStatus = table.checkStatus("userId") //获取选中行
                ,data = checkStatus.data; //获取选中的数据

            switch(obj.event){
                case 'add':
                    nowIndex = layer.open(  //弹出层
                        {
                            type: 1,
                            title: '添加用户页面',

                            // shade: 0.8,
                            area: ['500px', '450px'],
                            btnAlign: 'c',//按钮居中对齐
                            content: $("#add_form"), //选择表单的html Id
                            anim: 5//弹出效果 渐显


                        });
                    form.on('submit(add_submitTable)', function(data) {//REST风格 function(data) 因为submit监听了submitTable表单，data代表的是表单中的整体对象
                        if(data.field.status === "on") {
                            data.field.status = "1";
                        } else {
                            data.field.status = "0";
                        }

                        $.ajax({
                            type: "POST",
                            contentType:"application/json",//设置请求参数类型为json字符串
                            url: "/system/role",
                            data: JSON.stringify({
                                name: data.field.name,
                                description: data.field.description
                            }),
                            success:function(resp){
                                var code = resp.code;
                                if (code === 200 ){

                                    layer.close(nowIndex);
                                    $("#name").val("");
                                    $("#description").val("");
                                    layer.msg('添加成功', {icon: 1});
                                    tableInfo.reload();
                                }else {
                                    layer.msg("添加失败"+ " "+ resp.msg, {icon: 5});
                                }
                            }
                        });

                        return false;
                    });

                    break;
                case 'batchDeleted':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('是否确定删除选中的数据',
                            {
                                icon:0,
                                title: "提示",
                                skin: "deleteTips"
                            }
                            , function(){

                            var keyArr = '';
                            $.each(data,function (index, val) { //index是数组对象索引，val是对象
                               if (index===0){
                                   keyArr = keyArr + val.roleId;
                               }else {
                                   keyArr = keyArr +','+ val.roleId;
                               }
                            });

                            console.log(keyArr);
                            $.ajax({
                                type: "POST",
                                contentType:"application/x-www-form-urlencoded",//设置请求参数类型为json字符串
                                url: "/system/batchDeleteRoleByIds",
                                data:{
                                    ids: keyArr
                                },
                                success:function(resp){
                                    var code = resp.code;
                                    if (code === 200 ){
                                        layer.close(nowIndex);
                                        layer.msg('删除成功', {icon: 1});
                                        tableInfo.reload();
                                    }else {
                                        layer.msg("删除失败", {icon: 5});
                                    }
                                }
                            });


                        });


                    }
                    break;
            }
        });

        //监听行工具事件   tool是行工具条
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，demo 是 table 原始容器的属性 lay-filter="对应的值"
              data = null;
             data = obj.data; //获得当前行数据
            var el  = null
                ,layEvent = obj.event; //获得 lay-event 对应的值

            if(layEvent === 'detail'){
                nowIndex = layer.open(
                    {
                        type: 1,
                        title: '详情页面',

                        // shade: 0.8,
                        area: ['500px', '450px'],
                        btnAlign: 'c',//按钮居中对齐
                        content: $("#detail_form"), //选择表单的html Id
                        anim: 5,//弹出效果 渐显
                        success:function(index){
                            form.val("dataForm",{
                                "id" : data.roleid, //表格赋值操作 k为表单中的name ,v为渲染表格字段
                                "name": data.name,
                                "description": data.description
                            })
                        }

                    });

            }
            else if(layEvent === 'del'){

                layer.confirm('真的删除行么', function(index){

                    var id = data.userid;
                    console.log(data);
                    $.ajax({
                        type: "DELETE",
                        contentType:"application/json",//设置请求参数类型为json字符串
                        url: "/system/role/" +data.roleId  ,
                        success:function(resp){
                            var code = resp.code;
                            if (code === 200 ){
                                layer.close(nowIndex);
                                layer.msg('删除成功', {icon: 1});
                                tableInfo.reload();
                            }else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    });
                    layer.close(index);
                    //向服务端发送删除指令
                });
            }
            else if(layEvent === 'edit'){

                var id = data.userid;
                nowIndex = layer.open(
                    {
                        type: 1,
                        title: '编辑页面',

                        // shade: 0.8,
                        area: ['500px', '450px'],
                        btnAlign: 'c',//按钮居中对齐
                        content: $("#edit_form"), //选择表单的html Id
                        anim: 5,//弹出效果 渐显

                        success:function(index){
                            console.log(data);
                            console.log(data);
                            form.val("dataForm",{    //form.val('filter', object); 表单赋值和取值，这里赋值；
                                //如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值
                                "id" : data.roleid, //表格赋值操作 k为表单中的name ,v为渲染表格字段
                                "name": data.name,
                                "description": data.description
                            })
                        }

                    });

                form.on('submit(submitTable)', function(data_form) {//REST风格 function(data) 因为submit监听了submitTable表单，data代表的是表单中的整体对象



                    if(data_form.field.status === "on") {
                        data_form.field.status = "1";
                    } else {
                        data_form.field.status = "0";
                    }
                    $.ajax({
                        type: "PUT",
                        contentType:"application/json",//设置请求参数类型为json字符串
                        url: "/system/role"+"/"+data.roleId,
                        data: JSON.stringify({
                            "name": data_form.field.name,
                            "description": data_form.field.description
                        }),
                        success:function(resp){
                            var code = resp.code;
                            if (code === 200 ){
                                layer.close(nowIndex);
                                layer.msg('修改成功', {icon: 1});
                                tableInfo.reload();
                            }else {
                                layer.msg("添加失败", {icon: 5});
                            }
                        }
                    });
                    return false;
                })

            }
            else if(layEvent === 'assignment_perm'){
                element.render('collapse');
                nowIndex = layer.open(
                    {
                        type: 1,
                        title: '分配权限',
                        area: ['550px', '400px'],
                        btnAlign: 'c',//按钮居中对齐
                        content: $("#add_role_perm"),
                        anim: 5,//弹出效果 渐显
                        // btn:["添加","取消"],
                        success:function(index){
                            eTree=  eleTree.render({
                                elem: '#roleTree1',
                                url: '/system/findRoleHavePerm',
                                where: {roleId: data.roleId},
                                showCheckbox: true,
                                defaultExpandAll: true,
                                checkStrictly:true,
                                request: {
                                    key: "permissionId",
                                    name: "title",
                                    children: "children",
                                    checked: "checked",
                                    disabled: "disabled",
                                    isLeaf: "isLeaf"
                                },
                                response: {
                                    statusName: "code",
                                    statusCode: 200,
                                    dataName: "data"
                                }
                            });

                        }
                    });
            }

        });

        eleTree.on("nodeClick(role_tree_data)",function(node) {
            var node_data = null;
            node_data =node.data.currentData;
            console.log(node_data);
        });


        $("#edit_role_perm").click(function () {
            var tree_data = eTree.getChecked(false,true);
            console.log( tree_data );
            console.log("role的id:   "+ data);
            console.log( data.roleId);
            $.ajax({
                type: "PUT",
                contentType:"application/json",//设置请求参数类型为json字符串
                url: "/system/assignRolePerm/"+ data.roleId,
                data: JSON.stringify(tree_data),
                success:function(resp){
                    var code = resp.code;
                    if (code === 200 ){
                        layer.close(nowIndex);
                        layer.msg('修改成功', {icon: 1});
                    }else {
                        layer.msg("添加失败", {icon: 5});
                    }
                }
            });
        })


    });
</script>
<!--// 添加-->
<div class="layui-row" id="add_form" style="display:none;" >
        <div class="layui-col-md8" align="center">
            <form class="layui-form layui-from-pane" action="" style="margin-top:20px" lay-filter = "add_form" >

                <div class="layui-form-item">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <input type="text"  id = "name" name="name"  maxlength="16" required  lay-verify="required" autocomplete="off" placeholder="角色名称" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">描述信息</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入角色描述信息"  maxlength="16" id="description" name="description"class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item" style="margin-top:40px">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="add_submitTable">添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>

                </div>

            </form>
        </div>
    </div>
<!--// 详情-->
<div class="layui-col-md8" align="center" id="detail_form" style="display:none;">
    <form class="layui-form layui-from-pane" action="" style="margin-top:20px" lay-filter = "dataForm" >

        <div class="layui-form-item" style="display:none;">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <input type="hidden" name="id"  autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="text"   name="name"  required  lay-verify="required" autocomplete="off" placeholder="角色名称" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述信息</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入角色描述信息" name="description" class="layui-textarea"></textarea>
            </div>
        </div>

    </form>
</div>

<!--// 编辑-->
<div class="layui-row" id="edit_form" style="display:none;" >

    <div class="layui-col-md8" align="center">
        <form class="layui-form layui-from-pane" action="" style="margin-top:20px" lay-filter = "dataForm" >

            <div class="layui-form-item" style="display:none;">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input type="hidden" id="id"  autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <input type="text"   name="name"  required  lay-verify="required" autocomplete="off" placeholder="角色名称" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述信息</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入角色描述信息" name="description" class="layui-textarea"></textarea>
                </div>
            </div>

    <div class="layui-form-item" style="margin-top:40px">
        <div class="layui-input-block">
            <button type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="submitTable">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>
    </div>

</div>







</body>
</html>
